import { ref, watchEffect, onMounted, onUnmounted } from 'vue'
// Dark Mode Toggle Syste
export const globalToggleDarkMode = () => {
  const isDarkMode = !document.documentElement.classList.contains('dark-mode')
  document.documentElement.classList.toggle('dark-mode', isDarkMode)
  if (isDarkMode) {
    document.documentElement.style.setProperty('--bg-color', '#1a1a1a')
    document.documentElement.style.setProperty('--bgc-table', '#1a1a1a')
    document.documentElement.style.setProperty('--bgc-table-selected', '#1a1a1a')
    document.documentElement.style.setProperty('--text-color', '#ffffff')
  } else {
    document.documentElement.style.setProperty('--bg-color', '#ffffff')
    document.documentElement.style.setProperty('--bgc-table', 'rgb(204, 232, 207)')
    document.documentElement.style.setProperty('--bgc-table-selected', 'rgb(173, 216, 230)')
    document.documentElement.style.setProperty('--text-color', '#000000')
  }
}

// Window Resize Listener
export const globalListenerWindowResize = () => {
  const isMobile = ref(window.innerWidth < 768)

  watchEffect(() => {
    isMobile.value = window.innerWidth < 768
  })

  // 添加窗口大小变化监听
  onMounted(() => {
    window.addEventListener('resize', () => {
      isMobile.value = window.innerWidth < 768
    })
  })

  onUnmounted(() => {
    window.removeEventListener('resize', () => {
      isMobile.value = window.innerWidth < 768
    })
  })
  return {
    isMobile,
  }
}
